<template>
  <basic-dialog
    :visible="show"
    minWidth="832px"
    :title="`添加/编辑阈值`"
    :isShowClose="false"
    :isFullScreen="false"
    :isShowBasicFooter="false"
    :loading="isSubmitting"
  >
    <q-form
      @submit="submit"
      greedy
      class="q-gutter-md dialog-content"
      style="margin-left: 0"
    >
      <div class="form-inline">
        <yz-input
          inputType="select"
          :options="judgementMethodOptions"
          v-model="model.judgementMethod"
          :rules="[0]"
          :isDisable="editRuleFlag"
          title="判断方式"
        />
        <yz-input
          inputType="input"
          v-model.trim="model.alarmName"
          :rules="['6']"
          :hintRule="[
            (val) =>
              (val && val.length > 20 && '报警名称长度不得超过20') || null
          ]"
          :isRule="false"
          title="报警名称"
        />
      </div>
      <plcThresholdSetDialogSingle
        :show="show"
        :selectedLabels="selectedLabels"
        :nameOptions="nameOptions"
        :editRuleFlag="editRuleFlag"
        v-model="model"
        @submit="submit"
        v-if="model.judgementMethod === 1"
      />
      <plcThresholdSetDialogDefine
        :show="show"
        :selectedLabels="selectedLabels"
        :nameOptions="nameOptions"
        :editRuleFlag="editRuleFlag"
        v-model="model"
        @submit="submit"
        v-if="model.judgementMethod === 4"
      />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn
          outline
          label="取消"
          color="primary"
          @click="$emit('close')"
          class="q-mr-md"
        />
        <q-btn
          unelevated
          label="确认"
          color="primary"
          type="submit"
          :loading="isSubmitting"
        />
      </div>
    </q-form>
  </basic-dialog>
</template>

<script>
import plcThresholdSetDialogSingle from './plc-threshold-set-dialog-single.vue'
import plcThresholdSetDialogDefine from './plc-threshold-set-dialog-define.vue'
export default {
  name: 'plc-threshold-set-dialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    nameOptions: {
      type: Array,
      require: true
    },
    model: {
      type: Object,
      require: true
    },
    selectedLabels: {
      type: Array
    },
    editRuleFlag: {
      type: Boolean
    }
  },
  emit: ['close'],
  model: {
    prop: 'model',
    event: 'submit'
  },
  data () {
    return {
      isSubmitting: false,
      judgementMethodOptions: [
        { label: '单参数', value: 1 },
        { label: '自定义', value: 4 }
      ]
    }
  },
  methods: {
    submit () {
      this.$emit('submit', this.model)
      this.$emit('close')
    }
  },
  components: {
    plcThresholdSetDialogSingle,
    plcThresholdSetDialogDefine
  }
}
</script>
<style scoped lang="scss">
.form-inline {
  display: flex;
  margin-top: 26px;
  padding: 0 0;
  align-items: center;
}
</style>
